<template>
  <div class="separatorContainer">
    <div class="separator" :style="styles"></div>
  </div>
</template>
<script>
export default {
  name: 'Separator',
  props: {
    lineColor: {
      type: String,
      default: ''
    },
    lineWidth: {
      type: Number,
      default: 0
    },
    gradient: {
      type: Object,
      default: () => {}
    },
    lineType: {
      type: String,
      default: ''
    },
    isGradient: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    gradientColors() {
      if (this.gradient && this.gradient.colors) {
        return this.gradient.colors.join(',')
      } else {
        return '#fff'
      }
    },
    styles() {
      return {
        'border-top': `${this.lineWidth}px ${this.lineType} ${this.lineColor}`,
        '--gradient-height': this.isGradient
          ? this.gradient.height
            ? `${this.gradient.height}px`
            : '100px'
          : '0px',
        '--gradient-style': `linear-gradient(
        to ${this.gradient.position ? this.gradient.position : 'bottom'},
        ${this.gradientColors}
      )`
      }
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.separatorContainer {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

  .separator {
    width: 100%;
    background-color: #fff;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: var(--gradient-height); /* 默认渐变背景的高度 */
      background: var(--gradient-style);
    }
  }
}
</style>
